<template>
	<div class="modal-container">
		<el-dialog title="海外运费设置" width="1000px" custom-class="modal-record " :close-on-click-modal="false"
			:visible.sync="show" :before-close="on_before_close" @closed="on_closed">

			<div class="modal-inner">
				<div class="modal-ctx">
					<div class="input-box flex">
						<div class="label">标题</div>
						<div class="input-item">
							<el-input clearable type="text" v-model="form.ruleTitle" placeholder="标题"> </el-input>
						</div>
					</div>

					<div class="input-box flex">
						<div class="label">状态</div>
						<div class="input-item">
							<!-- 状态：1-开启 0-禁用 -->
							<el-radio-group v-model="form.ruleStatus">
								<el-radio :label="1">开启</el-radio>
								<el-radio :label="0">禁用</el-radio>
							</el-radio-group>
						</div>
					</div>

					<div class="input-box flex">
						<div class="label">规则内容</div>
						<div class="input-item">
						</div>
					</div>
					<div class="express-rule-container">
						<div class="express-rule">
							<div class="loop-wrap">

								<div class="table-sec">
									<el-table :data="rule_list" stripe border>
										<el-table-column prop="man" label="金额达XX元" width="auto">
											<template slot-scope="scope">
												<div class="id-text">
													<el-input v-model="scope.row.man"> </el-input>
												</div>
											</template>
										</el-table-column>

										<el-table-column prop="man" label="应付运费XX元" width="auto">
											<template slot-scope="scope">
												<div class="id-text">
													<el-input v-model="scope.row.yunfei"> </el-input>
												</div>
											</template>
										</el-table-column>

										<el-table-column prop="man" label="备注" width="auto">
											<template slot-scope="scope">
												<div class="id-text">
													<el-input v-model="scope.row.beizhu"> </el-input>
												</div>
											</template>
										</el-table-column>



										<!-- 操作 -->
										<el-table-column fixed="right" label="操作" width="120">
											<template slot-scope="scope">
												<div data-title="列表操作" class="row-actions-box">
													<el-button @click="do_row_remove(scope.row, scope)" type="text">删除</el-button>
												</div>
											</template>
										</el-table-column>
										<!-- 操作 -->
									</el-table>

									<div class="loop-add">
										<el-button type="primary" @click="do_row_add()"> 增加组 </el-button>
									</div>
								</div>
							</div>
						</div>

					</div>

				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="" @click="show = false">取消</el-button>
				<el-button type="primary" @click="do_submit()">确认</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>

	import {
		mapState
	} from "vuex";

	export default {
		name: "modal-hetong",
		components: {

		},

		data() {
			return {
				show: false,
				info: {},
				form: {
					"id": "",
					"ruleTitle": "",
					"ruleType": "1",
					"ruleInfo": "",
					"ruleStatus": 1,
				},

				rule_list: [{
					"man": '',
					"yunfei": '',
					"beizhu": ""
				}, ]
			};
		},
		computed: {},
		watch: {

		},
		created() {

		},

		methods: {
			init(row) {
				console.log('初始化 外贸运费')
				this.show = true;
				if (row) {
					this.info = row
					this.query_expree_detail()
				}
			},

			query_expree_detail() {
				this.$api({
					url: '/admin_service.php',
					method: 'get',
					data: {
						action: "setting_foreignInfo",
						id: this.info.id,
					}
				}).then(res => {
					if (res.code == 200) {
						let data = res.data;
						this.form = {
							"id": data.id,
							"ruleTitle": data.ruleTitle,
							"ruleType": data.ruleType,
							"ruleInfo": JSON.stringify(data.ruleInfo),
							"ruleStatus": data.ruleStatus,
						}

						if (data.ruleInfo) {
							this.rule_list = data.ruleInfo
							// try {
							// 	this.rule_list = JSON.parse(data.ruleInfo)
							// 	this.$log('规格说明', this.rule_list)
							// } catch (e) {
							// 	//TODO handle the exception
							// }
						}
					}
				})
			},


			on_before_close() {
				this.show = false;
			},
			on_closed() {
				this.form = {
					"id": "",
					"ruleTitle": "",
					"ruleType": "1",
					"ruleInfo": "",
					"ruleStatus": 1,
				}
				
				this.rule_list = []
			},
			do_submit() {
				if (!this.form.ruleTitle) {
					alertErr("请填写标题");
					return;
				}
				// if (!this.form.invoiceRemark) {
				// 	alertErr("请填写开票备注");
				// 	return;
				// }		
				let rule_list = this.rule_list.filter(v => v.man)
				if (!rule_list.length) {
					alertErr("请设置运费规则");
					return;
				}
				this.form.ruleInfo = JSON.stringify(rule_list)

				this.$api({
					url: '/admin_service.php',
					method: 'get',
					data: {
						action: "setting_saveForeign",
						id: this.info.id,
						...this.form
					}
				}).then(res => {
					alert(res)
					if (res.code == 200) {
						this.$emit('confirm')
						this.show = false
					}
				})
			},

		
			do_row_remove(row, scope) {
				this.rule_list.splice(scope.$index, 1)
			},
			do_row_add() {
				this.rule_list.push({
					"man": '',
					"yunfei": '',
					"beizhu": ""
				})
			},
		},
	};
</script>

<style scoped lang="less">
	.upload-plus {
		width: 140px;
	}

	/deep/ .el-upload {
		display: block;
		width: 200px;
		margin: 0 auto;
		margin: 0;

		.empty {
			.flex-center();
		}
	}

	/deep/ .modal-record {
		// margin-top: 80px !important;


		.modal-inner {
			padding: 0;
		}

		.el-dialog__header {
			.flex-between();
			border-bottom: 1px solid #eee;
			background: #a98c4d;
			background: #f7f7f7;
			height: 60px;
			line-height: 60px;
			padding: 0 20px;
			font-size: 18px;
			color: #333;

			.el-dialog__title {
				color: #000;
			}

			.el-dialog__headerbtn {

				// top: 0;
				.el-dialog__close {
					color: #000;
					font-size: 20px;
					font-weight: bold;
				}
			}
		}

		.el-dialog__body {
			padding: 0;
		}

		.el-dialog__footer {
			text-align: center;



		}
	}

	.modal-ctx {
		padding: 30px 50px;
		max-height: 60vh;
		overflow-y: auto;
		border-bottom: 1px solid #ddd;

		.tip {
			margin-bottom: 20px;
			color: #444;
			font-size: 14px;
		}

		.input-box {
			margin-bottom: 15px;
			position: relative;

			&.flex {
				display: flex;
				align-items: flex-start;
				// align-items: center;

				.label {
					margin-bottom: 0;
				}
			}

			.label {
				min-width: 80px;
				min-width: 120px;
				// margin-right: 20px;
				margin-bottom: 20px;
				font-size: 14px;
				color: #6e7285;
			}

			.input-item {
				flex: 1;
				display: flex;
				align-items: center;


				.el-input {
					width: 220px;
					width: 100%;
				}

				.el-select {
					width: 100%;
				}
			}
		}
	}

	.upload-ctx {
		margin: 20px 0;
	}

	.btn-send {}
</style>